{% extends './base.html' %}
{% block head %}
<title>添加新课程信息</title>
{% endblock %}
{% block content %}
<div class="container-sm">
    <div class="m-3">
        <h1>添加新课程信息</h1>
        <div class="alert alert-primary" role="alert">
            能力越大，责任越大——你正在创建一门新的课程信息，感谢你的贡献！如果你不清楚该填写什么，可以从章天杰同学制作的<a href="http://hducourse.imztj.cn/?tdsourcetag=s_pctim_aiomsg">HDU课程目录+</a>查询
        </div>
        <form class="comment-form">
            {% csrf_token %}
            <div class="form-floating mb-3">
                <input type="text" name="name" maxlength="200" class="form-control" id="floatingInput"
                    placeholder="课程名称" required>
                <label for="floatingInput">课程名称</label>
                <div id="passwordHelpBlock" class="form-text">
                    最长200字节。必需。
                </div>
            </div>
            <div class="form-floating mb-3">
                <input type="number" step="0.1" min="0" name="credit" class="form-control" id="floatingInput"
                    placeholder="这门课的学分" required>
                <label for="floatingInput">这门课的学分</label>
                <div id="passwordHelpBlock" class="form-text">
                    最低0。必需。
                </div>
            </div>
            <div class="form-floating mb-3">
                <select name="appraisal_method" class="form-select" aria-label="Floating label select example">
                    <option value="0">学校组织</option>
                    <option value="1">学院组织</option>
                    <option value="2">考查</option>
                </select>
                <label for="floatingSelect">考核方式</label>
            </div>
            <div class="form-floating mb-3">
                <select name="course_type" class="form-select" aria-label="Floating label select example">
                    <option value="0">专业任选</option>
                    <option value="1">专业必修</option>
                    <option value="2">专业选修</option>
                    <option value="3">专业限选</option>
                    <option value="4">人文任选</option>
                    <option value="5">人文素质与艺术修养</option>
                    <option value="6">人文经典与人文修养</option>
                    <option value="7">公共必修</option>
                    <option value="8">其他任选</option>
                    <option value="9">创业教育</option>
                    <option value="10">国际视野与公民教育</option>
                    <option value="11">外语模块</option>
                    <option value="12">学科必修</option>
                    <option value="13">实践</option>
                    <option value="14">实践必修</option>
                    <option value="15">实践选修</option>
                    <option value="16">心理健康选修</option>
                    <option value="17">必修</option>
                    <option value="18">校定必修</option>
                    <option value="19">科技任选</option>
                    <option value="20">科技发展与科学精神</option>
                    <option value="21">经管任选</option>
                    <option value="22">艺术任选</option>
                    <option value="23">课外必修</option>
                    <option value="24">通识必修</option>
                    <option value="25">通识选修</option>
                </select>
                <label for="floatingSelect">课程性质</label>
            </div>
            <div class="form-floating mb-3">
                <input type="text" name="teacher" maxlength="100" class="form-control" id="floatingInput"
                    placeholder="任课教师" required>
                <label for="floatingInput">任课教师</label>
                <div id="passwordHelpBlock" class="form-text">
                    最长100字节。必需。
                </div>
            </div>
            <div class="input-group mb-3">
                <input name="period_start" type="number" class="form-control" placeholder="起始周" aria-label="Username">
                <span class="input-group-text">~</span>
                <input name="period_end" type="number" class="form-control" placeholder="截止周" aria-label="Server">
            </div>
            <div class="form-floating mb-3">
                <select name="course_offering_institute" class="form-select" aria-label="Floating label select example">
                    <option value="0">人文艺术与数字媒体学院</option>
                    <option value="1">会计学院</option>
                    <option value="2">体育教学部</option>
                    <option value="3">党委学生工作部人民武装部学生处</option>
                    <option value="4">党委学生工作部人民武装部招生就业处创业学院</option>
                    <option value="5">卓越学院</option>
                    <option value="6">团委</option>
                    <option value="7">国有资产管理办公室</option>
                    <option value="8">图书馆</option>
                    <option value="9">外国语学院</option>
                    <option value="10">教务处</option>
                    <option value="11">机械工程学院</option>
                    <option value="12">材料与环境工程学院</option>
                    <option value="13">法学院</option>
                    <option value="14">理学院</option>
                    <option value="15">生命信息与仪器工程学院</option>
                    <option value="16">电子信息学院微电子学院</option>
                    <option value="17">管理学院</option>
                    <option value="18">经济学院</option>
                    <option value="19">网络空间安全学院浙江保密学院</option>
                    <option value="20">自动化学院人工智能学院</option>
                    <option value="21">计算机学院软件学院</option>
                    <option value="22">通信工程学院</option>
                    <option value="23">马克思主义学院</option>
                </select>
                <label for="floatingSelect">开课学院</label>
            </div>
            <div class="form-check mb-3">
                <input name="offering_class_now" class="form-check-input" type="checkbox" value="True" id="flexCheckChecked"
                    checked>
                <label class="form-check-label" for="flexCheckChecked">
                    开课
                </label>
            </div>
            <input class="username-input" type="hidden" name="username">
            <input class="token-input" type="hidden" name="token">
            <button type="submit" class="btn btn-primary w-100">提交</button>
        </form>
    </div>
</div>
<script async>
    let commentform = document.querySelector('.comment-form');
    let usernameinput = document.querySelector('.username-input');
    let tokeninput = document.querySelector('.token-input');

    function sendlesson(target) {
        let XHR = new XMLHttpRequest();
        let FD = new FormData(target);
        XHR.addEventListener('load', function (event) {
            obj = JSON.parse(event.target.responseText);
            alert(obj['message'])
            if (obj['succeeded']) {
                window.location.href = '/';
            }
        });
        XHR.addEventListener('error', function (event) {
            alert("提交失败，请检查网络连接并重载本页面");
        });
        XHR.open('POST', '/handlelesson/');
        XHR.send(FD);
    }

    commentform.addEventListener('submit', function (event) {
        event.preventDefault();
        sendlesson(event.target);
    });

    if (localStorage.getItem('token') != null && localStorage.getItem('username') != null) {
        usernameinput.value = localStorage.getItem('username');
        tokeninput.value = localStorage.getItem('token');
    } else {
        alert("请先登陆再创建课程ψ(._. )>");
        window.history.back();
    }
</script>
{% endblock %}